<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<div id="demo"></div>

<script>
    var demo;
    demo = new render_somthing();
    demo.init({
        // 渲染的div的id
        id: "#demo",
        // x/y/flow   分别为x向滚动、y向滚动、瀑布流
        method: "y",
        // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
        container: {
            html: `
			<div></div>
			`
        },
        // 渲染内容的配置
        content: {
            default: `
            <a href="#{href}"><img src="#{src}"></a>
			`,
        },
        // 条件渲染内容
        /*
        	^{ROW_INDEX} - 常量，表示数据数组的下标
        	#{title}     - 变量，表示数据数组中对象的key
        */
       condition: [{
       		//渲染条件
       		expression: "^{ROW_INDEX} == 2",
       		//渲染模板
       		html: `<div style="background-color: blue;width: 100vh;height: 300px;">#{href}</div>`
       }],
       callback: {
            click: function (res) {
                alert(JSON.stringify(res));
            }
        },
    });
    demo.render([
        {href:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-2.jpg",src:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-2.jpg"},
        {href:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-4.jpg",src:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-4.jpg"},
        {href:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-8.jpg",src:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-8.jpg"},
        {href:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-6.jpg",src:"http://www.bitauto.com/zhuanti/region/js2015/demo/018/baguetteBox/img/1-6.jpg"}
    ]);
</script>

